<template>
    <div class="store-management">
        <div class="store-info">
            <el-form :model="seller" label-width="120px" style="width: 400px;margin: 10px" label-position="left">
                <el-form-item label="商店logo：">
                    <el-upload
                            class="avatar-uploader"
                            action="/api/uploadFile"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="seller.avatar" :src="seller.avatar" class="avatar"
                             style="width: 150px;height: 150px;">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商店名称：">
                    <el-input v-model="seller.name"></el-input>
                </el-form-item>
                <el-form-item label="商店简介：">
                    <el-input v-model="seller.description"></el-input>
                </el-form-item>
                <el-form-item label="公告：">
                    <el-input v-model="seller.bulletin" type="textarea" :rows="5"></el-input>
                </el-form-item>
                <el-form-item label="配送时间：">
                    <el-input v-model="seller.deliveryTime"></el-input>
                </el-form-item>
                <el-form-item label="商店评分：">
                    <el-input v-model="seller.score"></el-input>
                </el-form-item>
                <el-form-item label="服务评分：">
                    <el-input v-model="seller.serviceScore"></el-input>
                </el-form-item>
                <el-form-item label="食物评分：">
                    <el-input v-model="seller.foodScore"></el-input>
                </el-form-item>
                <el-form-item label="最低购买价格：">
                    <el-input v-model="seller.minPrice"></el-input>
                </el-form-item>
                <el-form-item label="其他费用：">
                    <el-input v-model="seller.deliveryPrice"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="other-info">
            <div class="store-image">
                <div class="title">商店实景图片</div>
                <el-upload
                        action="/api/uploadFile"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-success="handleStoreImage"
                        :file-list="storeImage"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </div>
            <div class="store-info">
                <div class="title">商家活动</div>
                <ul>
                    <li v-for="(support,index) in supports" :key="index">
                        {{support.description}}<i class="el-icon-circle-close" @click="deleteSupport(support.id)"></i>
                    </li>
                </ul>
                <div class="add-support">
                    <input v-model="support">
                    <button @click="addSupport">添加</button>
                </div>
            </div>
            <div class="store-info">
                <div class="title">商家信息</div>
                <ul>
                    <li v-for="(info,index) in sellerInfo" :key="index">
                        {{info.message}}<i class="el-icon-circle-close" @click="deleteInfo(info.id)"></i>
                    </li>
                </ul>
                <div class="add-support">
                    <input v-model="info">
                    <button @click="addInfo">添加</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                seller: {},
                supports: [],
                support: '',
                sellerInfo: [],
                info: '',
                storeImage: [],
                dialogImageUrl: '',
                dialogVisible: false
            }
        },
        created() {
            this.$http.get("/api/store/info", {
                params: {
                    id: 1
                }
            }).then((response) => {
                this.seller = response.data;
            });
            this.$http.get("/api/support/list").then((response) => {
                this.supports = response.data;
            });
            this.$http.get("/api/info/list").then((response) => {
                this.sellerInfo = response.data;
            });
            this.$http.get("/api/store/image/list").then((response) => {
                this.storeImage = response.data;
                // console.log(this.storeImage)
            });
        },
        methods: {
            handleStoreImage(url) {
                // eslint-disable-next-line no-console
                // console.log(url)
                this.$http.get("/api/store/image/create", {
                    params: {
                        other: 1,
                        url: url
                    }
                }).then((response) => {
                    this.responseDetail(response);
                })
            },
            handleAvatarSuccess(res) {
                this.seller.avatar = res;
            },
            beforeAvatarUpload(file) {
                // const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 10;

                // if (!isJPG) {
                //     this.$message.error('上传头像图片只能是 JPG 格式!');
                // }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                }
                return isLt2M;
            },
            handleRemove(file) {
                // console.log(file, fileList);
                this.$http.get("/api/store/image/delete", {
                    params: {
                        id: file.id
                    }
                }).then((response) => {
                    this.responseDetail(response);
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            onSubmit() {
                this.$http.get("/api/store/updata", {
                    params: this.seller
                }).then((response) => {
                    this.responseDetail(response);
                })
            },
            addSupport() {
                this.$http.get("/api/support/create", {
                    params: {
                        sellerId: 1,
                        description: this.support
                    }
                }).then((response) => {
                    this.responseDetail(response);
                })
            },
            deleteSupport(id) {
                this.$http.get("/api/support/delete", {
                    params: {
                        id: id
                    }
                }).then((response) => {
                    this.responseDetail(response);
                })
            },
            addInfo() {
                this.$http.get("/api/info/create", {
                    params: {
                        other: 1,
                        message: this.info
                    }
                }).then((response) => {
                    this.responseDetail(response);
                })
            },
            deleteInfo(id) {
                this.$http.get("/api/info/delete", {
                    params: {
                        id: id
                    }
                }).then((response) => {
                    this.responseDetail(response);
                })
            },
            responseDetail(response) {
                response = response.data;
                if (response.code === 0) {
                    this.$message({
                        message: response.msg,
                        type: 'success',
                        customClass: 'alert-shadow'
                    });
                } else {
                    this.$message({
                        message: response.msg,
                        type: 'error',
                        customClass: 'alert-shadow'
                    });
                }
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .store-management {
        margin 10px
        padding 10px 10px 20px
        box-shadow 0 0 10px darkgrey
        border-radius 10px

        .store-info {
            display inline-block
            vertical-align top
            width 50%
        }

        .other-info {
            display inline-block
            width 50%
            padding 10px
            box-sizing border-box

            .store-info {
                display block
                margin-bottom 40px
                width 100%

                .title {
                    font-weight 700
                    font-size 16px
                    padding 10px
                    border 1px solid darkgrey
                    border-right none
                }

                ul {
                    border-left 1px solid darkgrey

                    li {
                        position relative
                        padding 10px
                        padding-right 30px
                        word-break break-all
                        line-height 30px

                        i {
                            position absolute
                            top 14px
                            right 0px
                            font-size 22px
                            padding 0 10px
                            display none
                            color #409EFF
                        }

                        &:hover {
                            box-shadow 0 0 10px darkgrey
                        }

                        &:hover i {
                            display initial
                        }
                    }
                }

                input {
                    height 30px
                    border-radius 5px
                    border 1px solid #409EFF
                    padding-left 5px
                    margin-right 10px
                    width 300px
                }

                button {
                    color white
                    background #409EFF
                    border-radius 5px
                    border none
                    padding 6px
                    height 30px
                    width 50px
                }
            }

            .store-image {
                padding 10px 0

                .title {
                    font-size 20px
                    font-weight 700px
                    padding 10px
                }

                ul {
                    li {
                        float left
                        padding 10px

                        .avatar {
                            width 200px
                        }
                    }
                }
            }
        }
    }
</style>
